<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
             组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函 数等 
             不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。 
             但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 
             全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了 
             data 必须是一个函数，不再是一个对象。
         -->
        <!--使用定义好的全局组件，注意组件就是为了复用-->
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>

        <mypartcomponent></mypartcomponent>

    </div>
    <script src="../node_modules/vue/dist/vue.js">
    </script>
    <script type="text/javascript">
        // 定义全局组件，两个参数：1，组件名称。2，组件参数
        //注意如果组件名带有大写字母，会被自动转换为小写字母
        Vue.component('mycomponent',{
            template: '<button v-on:click="count++">你点了全局组件 {{ count }} 次</button>',
            data(){
                return {
                    count: 0
                }
            }
        });

        const partcomponent = {
            template: '<button v-on:click="count++">你点了局部组件 {{ count }} 次</button>',
            data(){
                return {
                    count: 0
                }
            }
        };

        let vm = new Vue({
            el: "#app",
            components: {
                //key（引入时的名称）：value(定义好的子组件名称)
                mypartcomponent: partcomponent
            }
        })
    </script>
</body>
</html>